<template>
  <el-row class="list">
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine1Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-all-input.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine1|| 0 }}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine2Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-input.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine2|| 0}}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine3Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-takeOut.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine3 || 0}}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine4Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-output.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine4 || 0 }}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine5Output')"  style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-search.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine5 || 0}}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine6Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-sys.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine6|| 0 }}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine7Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-app/img/202212131049220358_admin.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine7|| 0 }}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine8Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-app/img/202212131051150545_admin.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine8 || 0}}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine9Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-app/img/202212131047110248_admin.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine9 || 0}}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
    <div class="list-col">
      <common-fieldset :title="$t('wms.jCPDLine10Output')" style="font-size:9px;background-color: #fff;">
        <div class="row-wrapper">
          <div class="image-box">
            <img src="http://screen.bjdnlsj.com/afl-app/img/202212131045050450_admin.png">
          </div>
          <div class="numberWrapper">
            <span class="number"> {{ data.processCount.JCPDLine10 || 0 }}</span>
            <span class="unit" style="font-size:10px;"> pcs</span>
          </div>
        </div>
      </common-fieldset>
    </div>
  </el-row>
</template>

<script setup>
import commonFieldset from '@/components/common/commonFieldset'
import { CountTo } from 'vue3-count-to'
import { reactive, ref, watch, onMounted } from 'vue'
import iconFont from '@/components/IconFont/iconFont'
import dataFieldset from '@/components/mes/JCLines/dataFieldset'
import { processInputOutputTotal } from '@/api/mesApi'

const data = reactive({
  url: 'http://screen.bjdnlsj.com/afl-data-screen/images/icon-screen.png',
  processCount: ''
})

onMounted(() => {
  procesTotal()
  setTime()
})
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await procesTotal()
  }, 6000)
}

// 产出汇总
const procesTotal = () => {
  processInputOutputTotal({
    processCode: 'JC'
  }).then(res => {
    if (res.status === 200 && res.data != null) {
      data.processCount = res.data.footMap
    }
  })
}
</script>

<style scoped lang="scss">
.list {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap;
  overflow: hidden;

  &-col {
    margin-left: 5px;
    height: 100%;
    width: 100%;
  }

  &-card {
    height: 100%;
  }

  // 给第一个去掉margin
  &-col:first-child {
    margin: 0;
  }

  .el-card__body {
    padding: 0 !important;
    height: 100%;
    width: 100%;
    z-index: 9999999;
  }

}

.row-wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  .image-box {
    text-align: center;
    padding-top: 15px;
    //padding-left: 5px;
    flex: 0 0 5%;
    border-right: 1px solid #e3e3e3;

    img {
      height: 40px
    }
  }

  .numberWrapper {
    flex: 1 auto;
    font-size: 22px;
    line-height:300%;
    margin-left: 5px;
    text-align: center;
    box-sizing: border-box;

    .number {
      font-size: 22px;
    }
  }
}
</style>
